// 总结： 
// 深度优先： 递归，贪心(有深就入)
// 广度优先 使用队列 （数组 vs 链表哦
// children 和 childNodes 不同
// 队列 先进先出 ， 栈 先进后出

// 深度优先可以不用递归吗？  可以用栈


/**
 * @description 遍历dom 树
 */
function visitNode(n: Node) {
  if(n instanceof Comment) {
    console.log('comment node --- ', n.textContent);
  }

  if(n instanceof Text) {
    const t = n.textContent?.trim
    if(t) {
      console.log('Test node --- ', n.textContent?.trim());
    }
  }

  if(n instanceof HTMLElement) {
    console.log('element node ---', `<${n.tagName.toLowerCase()}>`);
  }
}


/**
 * 深度优先遍历
 * @param root dom node
 */
function depthFirstTraverse (root: Node) {
  visitNode(root)
  const childNodes = root.childNodes // .childNodes 有文本 有注释 有元素， .children 只有元素
  if(childNodes.length) {
    childNodes.forEach(child => {
      depthFirstTraverse(child)
    })
  }
}


/**
 * 广度优先遍历
 * @param root dom node
 * 最好用链表,性能更好
 * 数组也一样 先进先出的模式访问
 */
function breadthFirstTraverse(root: Node) {
  const queue: Node[] = []

  queue.unshift(root)
  while(queue.length > 0) {
    const curNode = queue.pop()
    if(curNode == null) break 
    visitNode(curNode)

    const childNodes = curNode.childNodes
    if(childNodes.length) {
      childNodes.forEach(child => queue.unshift(child ))
    }
  } 
}